<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innisfree官方网站</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="icon" href="./img/OIP-C.jpg">
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="w">
            <a href="#" style="padding:0px 10px"><img src="img/logo_2ebdcae.png" alt="" style="width:164px"></a>
            <div class="login">
                Hey,&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;<span style="color: gray;">注册</span>
                <p class="down">
                    <span>Hey</span>
                    <a href="login.html" class="dl">登陆</a>
                    <a href="register.html" class="zc">注册</a>
                    <a href="#" class="address">附近暂无门店</a>
                </p>
            </div>
            <input type="text" class="txt1" placeholder="第四代小黑瓶">
            <img src="img/www.innisfree.cn_(1)fdj_03.png" alt="" class="small" style="width:24px">
            <ul>
                <li><a href="#">购物</a></li>
                <li><a href="#">热门活动</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
            <div class="box1">
                <div class="inside">
                    <h5>热门搜索</h5>
                    <ul class="ul2">
                        <li><a href="#" style="width:90px;display:block;">第四代小绿瓶</a></li>
                        <li><a href="#" style="margin-left:15px;">小绿瓶</a></li>
                        <li><a href="#">限定散粉</a></li>
                        <li><a href="#">007精华</a></li>
                    </ul>
                    <ol>
                        <li><a href="#" style="width:70px;">美白橘光瓶</a></li>
                        <li><a href="#">面膜</a></li>
                        <li><a href="#">洁面</a></li>
                        <li><a href="#">红茶</a></li>
                        <li><a href="#">蓝莓</a></li>
                    </ol>
                </div>
            </div>
        </div>

    </header>
    <main>
        <form autocomplete="on">
            <div class="box">
                <div class="center">
                    <div class="loginCont">
                        <img src="img/QQ图片20220722205239.jpg" alt="" style="width:100px;" class="piclogo">
                        <span class="title" style="color: #024137;margin-left:10px;">innisfree注册</span>
                        <div class="text">
                            <div class="inp">
                                <input class="input" type="text" name="username" placeholder="账号" id="txt">
                                <span></span>
                            </div>
                            <div class="inp">
                                <input class="input" type="password" name="userpass" placeholder="密码" id="pass">
                                <!-- <span><img src="img/close.png" alt="" class="ceye"></span> -->
                            </div>
                            <div class="btn" id="button" style="color:#fff;">注册</div>
                        </div>
                        <div class="zhuce">
                            <span>手机短信登录/注册</span>
                            <a href="javascript:;">收不到验证码?</a>
                        </div>
                        <div class="qtfs">
                            <span class="line-left"></span>
                            <span class="lint-text">&nbsp;&nbsp;其他登录方式&nbsp;&nbsp; </span>
                            <span class="line-right"></span>
                        </div>
                        <div class="xm">
                            <a href="#"><img src="img/xiaomi.svg" alt=""></a>
                            <a href="#"><img src="img/weixin.svg" alt=""></a>
                            <a href="#"><img src="img/qq.svg" alt=""></a>
                            <a href="#"><img src="img/weibo.svg" alt=""></a>
                            <a href="#"><img src="img/zhifubao.svg" alt=""></a>
                        </div>
                        <div class="xieyi">
                            <input type="text">
                            <label for=""></label>
                            已阅读并同意<a href="#">innisfree服务协议</a>"和"<a href="#">隐私条款</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </main>
    <footer>
        <div class="w">
            <div class="box">
                <div class="footer_1">
                    <div class="qqq">
                        <img src="./footer.images/logo_white_56c6462.png" alt="">
                    </div>

                    <div class="footer_1_f1">
                        <a href="#"><img src="./footer.images/weibo_74219f1.png" alt=""></a>
                        <a href="#"><img src="./footer.images/1.png" alt=""></a>
                        <img src="./footer.images/2.png" alt="">
                        <div>
                            <p>专卖店导航</p>
                            <p>探店指南</p>
                        </div>
                    </div>
                    <div class="code">
                        <div class="code_left">
                            <img src="./footer.images/copyright_d57b29a.png" alt="">
                        </div>
                        <div class="code_right">
                            <!-- <img src="./footer.images/K]QGNZA1${9~%SOF[8SC)H4.png" alt=""> -->
                            <p style="width:300px;padding-left: 10px;">copyright@2011 amorerepacific corporation.</p>
                            <p style="padding-left: 10px;">All rights reserved</p>
                        </div>

                    </div>
                </div>

                <div class="footer_2">
                    <div class="footer_2_top">

                    </div>
                    <div class="footer_2_bottom">
                        <figure style="text-align:center;margin-left:15px;"><img src="./footer.images/q1.png" alt=""
                                style="width: 72px;height:72px;padding-left: 8px;">
                            <p>Innisfree公众号</p>
                        </figure>
                        <figure style="text-align:center;margin-left:20px"><img src="./footer.images/q2.png" alt="">
                            <p>Innisfree商城小程序</p>
                        </figure>
                    </div>

                </div>

                <div class="footer_3">
                    <div class="lianxi">联系我们</div>
                    <p>服务热线：400-920-9238</p>
                    <p>服务时间：09:00-21:00 （不含国定假日）</p>
                    <p>客服邮箱：innisfree@innisfree.cn</p>

                    <p style="padding-top:30px;"><a href="#"><img src="./footer.images/gongan_caf441d.png" alt=""
                                style="padding-right: 20px;"></a> <span>公网安备312102451578</span></p>

                </div>

                <div class="footer_4">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">会员中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">加入会员</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">会员制度</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">我的主页</li>
                        </a>
                    </ul>
                </div>

                <div class="footer_5">
                    <ul>
                        <a href="#">
                            <li id="huiyuan">客服中心</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">公告板</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">使用说明</li>
                        </a>
                        <a href="#">
                            <li style="font-size:12px;">FAQ</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>
<script src="js/jquery.min.js"></script>
<!-- <script src="css/swiper-bundle.min.js"></script> -->
<!-- 回顶 -->
<script>
    $(window).on("scroll", function () {
        if ($(window).scrollTop() > 250) {
            $("#backtop").fadeIn(1000);
        } else {
            $("#backtop").fadeOut(1000);
        }
    })
    $("#backtop").on("click", function () {
        $("html,body").animate({
            scrollTop: 0
        }, 1000)
    })
</script>

<!-- header.login隐藏 -->
<script>
    $(".login").hover(function () {
        $(".down").stop().slideToggle(300);
    })
    $(".txt1").on("focus", function () {
        $(".box1").css('display', 'block');
    })
    $(".txt1").on("blur", function () {
        $(".box1").css('display', 'none');
    })

</script>
<!-- 请求 -->
<script>
    var flag = false;
    // checkUser
    $(".inp>#txt").on("blur", function () {
        $.get("goodsAndShoppingCart/checkUser.php", { "username": $(".inp>#txt").val() }, function (data) {
            console.log(data);
            if (data.trim() == "1") {
                $(".inp>#txt").next().html("√");
                $(".inp>#txt").next().css("color", "green");
                $(".inp>#txt").next().css("display", "block");
                flag = true;
            } else {
                $(".inp>#txt").next().html("×");
                $(".inp>#txt").next().css("color", "red");
            }
        })
    })

    $(".btn").on("click", function () {
        //  1. 
        if (flag) {
            let xhr = new XMLHttpRequest();
            // 2. 
            xhr.open("post", `./goodsAndShoppingCart/addUser.php`);//携带请求参数到后端
            // 3. 
            // 设置请求头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            // post请求需要把请求参数写在 send中，但是不能带"""
            xhr.send("username=" + $("#txt").val() + "&userpass=" + $("#pass").val());
            // 4.
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);

                    if (xhr.responseText.trim() == 'success') {
                        location.href = './login.html'
                    }
                }
            }
        } else {
            alert("注册失败");
        }
        return false;
    })

</script>